<template>
    <views class="agent_list_look">
        <div class="header">
            <div class="header_title" :class="{active: baseInfo}" @click="changeStatus('baseInfo')" >基本信息</div>
            <div class="header_title" :class="{active: isRate}" @click="changeStatus('isRate')">费率设置</div>
            <div class="header_title" :class="{active: isAccount}" @click="changeStatus('isAccount')">账户设置</div>
        </div>
        <div class="content">
            <!-- 基本信息 -->
            <agent-base v-show="baseInfo"  :detail="detail"  ></agent-base>

            <!-- 费率设置 -->
            <agent-rate v-show="isRate" :agent_id="agent_id" :rate="rate"  ></agent-rate>

            <!-- 账户设置 -->
            <agent-account v-show="isAccount"  :account="account" ></agent-account>
        </div>
    </views>
</template>

<script>
    import AgentAccount from 'components/agent/child_component/child_component/agent_account';
    import AgentBase from 'components/agent/child_component/child_component/agent_base';
    import AgentRate from 'components/agent/child_component/child_component/agent_rate';


export default {
    name:"AgentListLook",
    components: {
        AgentAccount,
        AgentBase,
        AgentRate
    },
    data(){
          return {
              baseInfo: true,           //基本信息是否显示（默认点击查看企业时，基本信息默认展开显示）
              isRate: false,          //费率信息是否显示
              isAccount: false,           //账户设置是否显示
              agent_id:0,
              detail:{},            //基本信息
              rate:{},              //标准费率信息
              account:{}            //账户信息   
          }
    },
    mounted(){
            this.$setRouteTitle();
             //将链接过来的 agent_id 参数赋值
            this.agent_id = this.$route.query.agent_id;
            //获取代理商基本信息-标准费率-账户信息
            console.log('come here');
            this.getAgentDetail();
    },
    methods:{
        changeStatus(select){
            switch(select){
                case 'baseInfo':
                    if(!this.baseInfo){
                        this.isRate = false;
                        this.isAccount = false;
                        this.baseInfo = true;
                    }   
                    break;
                case 'isRate':
                    if(!this.isRate){
                        this.baseInfo = false;
                        this.isAccount = false;
                        this.isRate = true;
                    }   
                    break;
                case 'isAccount':
                    if(!this.isAccount){
                        this.baseInfo = false;
                        this.isRate = false;
                        this.isAccount = true;
                    }   
                    break;
            }     
        },
        getAgentDetail(){
            this.$raxios.post(this.$mapapi.getAgentDetail, {data:{agent_id: parseInt(this.agent_id)}}).then(res => {
                if(res.code != 200&&res.code!=501)     return  Promise.reject(res.msg);
                this.detail = res.data.detail;
                this.rate.agent_name = res.data.detail.agent_name;
                this.rate.standard_rate = res.data.detail.standard_rate;
                this.account = res.data.account;

            }).catch(res => {
                this.$message.error(res);
            });

        }
    }
}
</script>

<style lang="less" :scope="true" >
    .agent_list_look{
        padding:0 10px;
        font-size: 14px;
        background: #fff;

        .active{
            color: #4280f2;
            border-bottom: 2px solid #4280f2
        }

        .header{
            display: inline-block;
            margin:10px auto;
            width: 100%;
            border-bottom: 1px solid #e0e0e0;

            .header_title{
                width: 70px;
                height: 50px;
                margin: 0 10px;
                line-height: 50px;
                text-align: center;
                float: left;
                
            }
        }

        .content{
            margin: 10px;
        }

    }

</style>>